<template>
    <section>
        <el-col :span="24">
            <el-button type="info" class="el-icon-plus" size="small" plain @click="addBtn">
                新增
            </el-button>
            <el-button type="primary" class="el-icon-s-claim" size="small" plain :disabled="bomXHData.length == 0" @click="saveBtn" :loading="btnLoading">
                保存
            </el-button>
            <el-table :header-cell-style="{ background: '#F3F4F7', color: '#555' }" :data="bomXHData" :max-height="height-32" border size="mini"
                      class="bomXh-table-box" style="width: 100%;margin-top: 2px;" show-summary :summary-method="getSummaries">
                <el-table-column align="center" label="删除" width="60">
                    <template slot-scope="scope">
                        <el-button type="text" class="el-icon-delete" @click="delBtn(scope.$index)"></el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="复制" width="60">
                    <template slot-scope="scope">
                        <el-button type="text" class="el-icon-copy-document" @click="copyBtn(scope.$index)"></el-button>
                    </template>
                </el-table-column>
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column width="100" prop="f51" label="线色">
                    <template slot-scope="{row}">
                        <el-input v-model.trim="row.f51" size="mini"></el-input>
                    </template>
                </el-table-column>
                <el-table-column width="100" prop="part" label="部位">
                    <template slot-scope="{row}">
                        <el-input v-model.trim="row.part" size="mini"></el-input>
                    </template>
                </el-table-column>
                <el-table-column width="100" prop="f52" label="针数">
                    <template slot-scope="{ row }">
                        <el-input :min="0" placeholder="0" v-model.trim="row.f52" size="mini" type="number"></el-input>
                    </template>
                </el-table-column>
                <el-table-column width="100" prop="f53" label="换色批次">
                    <template slot-scope="{row}">
                        <el-input v-model.trim="row.f53" size="mini"></el-input>
                    </template>
                </el-table-column>
                <el-table-column width="120" prop="f54" label="针数单价">
                    <template slot-scope="{ row }">
                        <el-input :min="0" placeholder="0" v-model.trim="row.f54" size="mini" type="number" @change="priceChange" style="width: 80%"></el-input>
                        <el-tooltip class="item" effect="dark" content="同步列价格" placement="right">
                            <el-button type="text" class="el-icon-sort" size="mini" style="margin-left: 5px" @click="syncBtn(row.f54)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column width="100" label="针数计费">
                    <template slot-scope="{row}">
                        {{parseFloat((Number(row.f52) * Number(row.f54)).toFixed(2))}}
                    </template>
                </el-table-column>
                <el-table-column width="100" prop="f55" label="其他费用">
                    <template slot-scope="{ row }">
                        <el-input :min="0" placeholder="0" v-model.trim="row.f55" size="mini" type="number"></el-input>
                    </template>
                </el-table-column>
                <el-table-column width="100" label="实际绣花价">
                    <template slot-scope="{row}">
                        {{parseFloat((Number(row.f52) * Number(row.f54) + Number(row.f55)).toFixed(2))}}
                    </template>
                </el-table-column>
                <el-table-column prop="comment" label="备注" width="300">
                    <template slot-scope="{row}">
                        <el-input v-model.trim="row.comment" size="mini"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label=""></el-table-column>
            </el-table>
        </el-col>
    </section>
</template>

<script>

import {designDetailXhSave} from "../../../api/bs/design";

export default {
    name: "designBomXhEd",
    props: {
        detail: {
            type: Object,
            default: {}
        },
        bomXHData:{
            type: Array,
            default: []
        },
        height: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            user: {},
            nodeActions: [],
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{

    },
    methods: {
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计";
                    return;
                }
                if(column.label == '实际绣花价'){
                    sums[index] = 0;
                    data.forEach(item => {
                        let price = parseFloat((Number(item.f52) * Number(item.f54) + Number(item.f55)).toFixed(2));
                        sums[index] += price;
                    })
                    sums[index] = parseFloat(sums[index].toFixed(2));
                }else if(column.label == '针数'){
                    sums[index] = 0;
                    data.forEach(item => {
                        sums[index] += parseInt(item.f52);
                    })
                } else {
                    sums[index] = "";
                }
            });

            return sums;
        },
        priceChange(val){
            if(val > 0.0005){
                this.$message.warning("绣花针数单价超过0.0005");
            }
        },
        //同步列价格
        syncBtn(val){
            for(let i in this.bomXHData){
                this.$set(this.bomXHData[i], 'f54', parseFloat(val));
            }
        },
        delBtn(index){
            this.$confirm(`确认删除该绣花, 是否继续`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.bomXHData.splice(index, 1);
            }).catch(() => {

            })
        },
        copyBtn(index){
            let row = JSON.parse(JSON.stringify(this.bomXHData[index]));
            delete row.id;
            row.position = this.bomXHData[this.bomXHData.length - 1].position;
            console.log(row);
            this.bomXHData.push(row);
        },
        addBtn(){
            let position = this.bomXHData.length > 0 ? this.bomXHData[this.bomXHData.length - 1].position+1 : 1;
            this.bomXHData.push({
                comment: "",
                f51: "",
                f52: 0,
                f53: "",
                f54: 0,
                f55: 0,
                part: "",
                position: position
            });
        },
        saveBtn(){
            let obj = {
                style_id: this.detail.id,
                bom_xh_data: JSON.stringify(this.bomXHData),
            };
            this.btnLoading = true;
            designDetailXhSave(obj).then((res) => {
                this.btnLoading = false;
                if(res.code === 0){
                    this.$message.success("绣花BOM：保存成功");
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(() => {
                this.btnLoading = false;
            })
        },
    },
    mounted() {

    }
}
</script>

<style scoped>
.bomXh-table-box /deep/ .el-input__inner {
    padding: 0 0 !important;
    border: none !important;
}
</style>
